<template>
    <div class="tabapp">
        <div class="header">
        <div style="float: left">
         
          &emsp; 车站首字母
          <el-select v-model="value" class="m-2" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          style="
            float: right;
            display: flex;
            margin-top: 15px;
            margin-right: 15px;
          "
        >
          <el-checkbox label="启用" />
          <el-input
            v-model="input"
            :prefix-icon="Search"
            style="width: 130px; margin: 0 20px"
            placeholder="搜索ID/车次"
          />
          <el-button size="large" color="#1ba9ba" @click="add">
            <img
              src="@/assets/Icons/png/新建白色.png"
              style="width: 30px"
              alt=""
            />
            <span style="color: white; margin-left: 3px">新增车次</span>
          </el-button>
        </div>
    </div>
		<div style="width: 100%;">
		<MyTable 
		@fatherdelete="deleterow"
		@fatherset="setflag"
		@fatheredit="edit"
		:table-data="station"
		:column-data="coldata"
		></MyTable>
		</div>
    </div>
</template>

<script setup lang="ts">
import MyTable from "@/components/MyTable.vue";
import { Search } from "@element-plus/icons-vue";
import { listcount, useCounterStore } from "@/store/counter";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const input = ref("");
const value = ref("全部");
const options = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "高速动车",
  },
  {
    value: "Option3",
    label: "火车",
  },
];
const coldata = [
{
    prop: "id",
    label: "ID",
    width: "",
  },
  {
    prop: "staton",
    label: "车站",
    width: "",
  },
]
const store = useCounterStore();
const { station } = storeToRefs(store);
const add =()=>{
}
const deleterow = (row: listcount) => {
  console.log(row);
  store.ststiondelete(row.id);
};
const setflag = (row: listcount) => {
  console.log(row);
  store.ststionsetflag(row.id);
};
const edit = (row: listcount) => {
  console.log(row);
};
</script>

<style scoped>
.tabapp{
    width: calc(100% - 20px);
    min-height: calc(100vh - 80px);
	margin-left: 10px;
	margin-top: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 0px 
		rgba(51, 51, 51, 0.1);
	border-radius: 2px;
	border: 1px solid #ccc;
}
.header {
  width: 100%;
  height: 110px;
  line-height: 66px;
  padding: 30px 20px;
  overflow: hidden;
}
</style>